<template>
  <div class="vip">
    <div class="vip1">
    <p class="p1">淘麦vip会员中心</p>
    <h2>升级为淘麦vip会员<br>享更多会员权益</h2>
        <Vip/>
        <p class="p2">积分兑换 &nbsp;&nbsp;&nbsp;&nbsp;<span>每周来逛都有上新</span></p>
           <ul>
           <li><img src="imgs/1.png" alt=""></li>
           <li><img src="imgs/2.png" alt=""></li>
           <li><img src="imgs/3.png" alt=""></li>
         </ul>
    </div>
    <div class="vip2">
      <input type="text"  placeholder="开启会员之旅">
    </div>
      <Bb/>
  </div>
</template>

<script>
import Vip from '../components/vip/vip.vue'
import Bb from '../components/buttomBar.vue'

export default {
components:{
  Vip,
  Bb
},


}
</script>

<style scoped >
  .vip{
    height:100%;
  }
   .vip .p1{
     font-size: 0.2rem;
     color: peru;
     text-align: center;
     /* margin-top: 0.2rem; */
   }
   .vip h2{
     font-size: 0.3rem;
     text-align: center;
      color: peru;
      margin-top: 0.1rem;
   }
   .vip .vip1{
     width: 100%;
     height: 4rem;
     background-image: radial-gradient(pink,rgb(230, 212, 132) 2rem);
   }
    .p2{
        font-size: 0.2rem;
        color: peru;
        font-weight: bold;

    }
    .p2 span{
       font-weight: normal;
       color: black;
       font-size: 0.15rem;
    }
    ul{
      width:98%;
      margin: auto;
      height: 1rem;
      /* overflow: hidden; */
      /* border: 0.01rem solid red ; */
      display: flex;
      justify-content:space-between;
      
    }
    li{
       width:  1rem;
       height: 1rem;
       /* background-color:rgb(243, 232, 196); */
       list-style: none;
    }
    ul li img{
      width: 1rem;
      height: 1rem;
    }
    .vip .vip2{
      width: 80%;
      height: 1rem;
      position: relative;
    
    }
    .vip .vip2 input{
      width: 95%;
      height: 0.5rem;
     background-image: radial-gradient(pink,rgb(230, 212, 132) 2rem);
      border-radius: 0.5rem;
      position: absolute;
      left: 0.5rem;
      top: 1.5rem;
      text-align: center;
      font-size: 0.2rem;
       color: peru;
      font-weight: bold;
      border: none;
     
      
    }
</style>